<template>
  <div class="sys-section-bg">
    <div style="height:32px;"></div>
    <div class="page-title">
      <el-icon><i-ep-menu /></el-icon>
      <span style="margin-left: 8px; font-size: 20px; font-weight: bold;">菜单管理</span>
    </div>
    <div class="toolbar">
      <el-input v-model="menuSearch" placeholder="请输入菜单名称/路径" style="width: 240px; margin-right: 16px;" clearable />
      <el-button type="primary" @click="handleMenuSearch">搜索</el-button>
      <el-button type="success" @click="openAddMenuDialog" style="margin-left: 16px;">添加菜单</el-button>
    </div>
    <el-table :data="pagedMenus" style="width: 100%; margin-top: 16px;" v-loading="menuLoading">
      <el-table-column prop="id" label="ID" width="80" />
      <el-table-column prop="name" label="菜单名称" />
      <el-table-column prop="path" label="路径" />
      <el-table-column prop="icon" label="图标" />
      <el-table-column label="操作" width="180">
        <template #default="{ row }">
          <el-button size="small" @click="openEditMenuDialog(row)">编辑</el-button>
          <el-button size="small" type="danger" @click="handleDeleteMenu(row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination background layout="total, prev, pager, next, jumper" :total="filteredMenus.length" :page-size="menuPageSize" :current-page="menuCurrentPage" @current-change="handleMenuPageChange" style="margin-top: 16px; text-align: right;" />
    
    <!-- 添加/编辑菜单弹窗 -->
    <el-dialog :title="menuDialogMode === 'add' ? '添加菜单' : '编辑菜单'" v-model="menuDialogVisible" width="400px" @close="resetMenuDialog">
      <el-form :model="menuDialogForm" :rules="menuDialogRules" ref="menuDialogFormRef" label-width="80px">
        <el-form-item label="菜单名称" prop="name">
          <el-input v-model="menuDialogForm.name" />
        </el-form-item>
        <el-form-item label="路径" prop="path">
          <el-input v-model="menuDialogForm.path" />
        </el-form-item>
        <el-form-item label="图标" prop="icon">
          <el-input v-model="menuDialogForm.icon" />
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="menuDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="submitMenuDialog">确定</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, computed, onMounted, nextTick } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import axios from 'axios'

// 菜单管理数据
const menus = ref([
  { id: 1, name: '仪表盘', path: '/dashboard', icon: 'menu' },
  { id: 2, name: '成员管理', path: '/user', icon: 'user' },
  { id: 3, name: '文章管理', path: '/articles', icon: 'document' },
  { id: 4, name: '文件管理', path: '/files', icon: 'folder' }
])
const menuSearch = ref('')
const menuSearchKeyword = ref('')
const menuPageSize = ref(10)
const menuCurrentPage = ref(1)
const menuDialogVisible = ref(false)
const menuDialogMode = ref('add')
const menuDialogForm = ref({ id: null, name: '', path: '', icon: '' })
const menuDialogFormRef = ref(null)
const menuLoading = ref(false)
const menuDialogRules = {
  name: [{ required: true, message: '请输入菜单名称', trigger: 'blur' }],
  path: [{ required: true, message: '请输入路径', trigger: 'blur' }],
  icon: [{ required: true, message: '请输入图标', trigger: 'blur' }]
}

const filteredMenus = computed(() => {
  if (!menuSearchKeyword.value) return menus.value
  return menus.value.filter(m =>
    m.name.includes(menuSearchKeyword.value) ||
    m.path.includes(menuSearchKeyword.value)
  )
})

const pagedMenus = computed(() => {
  const start = (menuCurrentPage.value - 1) * menuPageSize.value
  return filteredMenus.value.slice(start, start + menuPageSize.value)
})

function handleMenuSearch() {
  menuSearchKeyword.value = menuSearch.value
  menuCurrentPage.value = 1
}

function openAddMenuDialog() {
  menuDialogMode.value = 'add'
  Object.assign(menuDialogForm.value, { id: null, name: '', path: '', icon: '' })
  menuDialogVisible.value = true
  nextTick(() => menuDialogFormRef.value && menuDialogFormRef.value.clearValidate())
}

function openEditMenuDialog(row) {
  menuDialogMode.value = 'edit'
  Object.assign(menuDialogForm.value, row)
  menuDialogVisible.value = true
  nextTick(() => menuDialogFormRef.value && menuDialogFormRef.value.clearValidate())
}

function resetMenuDialog() {
  Object.assign(menuDialogForm.value, { id: null, name: '', path: '', icon: '' })
}

function submitMenuDialog() {
  menuDialogFormRef.value.validate(valid => {
    if (!valid) return
    if (menuDialogMode.value === 'add') {
      const maxId = menus.value.length ? Math.max(...menus.value.map(m => m.id)) : 0
      menus.value.push({ ...menuDialogForm.value, id: maxId + 1 })
      ElMessage.success('添加成功')
    } else {
      const idx = menus.value.findIndex(m => m.id === menuDialogForm.value.id)
      if (idx !== -1) {
        menus.value[idx] = { ...menuDialogForm.value }
        ElMessage.success('编辑成功')
      }
    }
    menuDialogVisible.value = false
  })
}

function handleDeleteMenu(row) {
  ElMessageBox.confirm(`确定要删除菜单 ${row.name} 吗？`, '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    const idx = menus.value.findIndex(m => m.id === row.id)
    if (idx !== -1) {
      menus.value.splice(idx, 1)
      ElMessage.success('删除成功')
    }
  })
}

function handleMenuPageChange(page) {
  menuCurrentPage.value = page
}

// 组件挂载时获取数据
onMounted(() => {
  // 这里可以添加从后端获取菜单数据的逻辑
  console.log('菜单管理组件已加载')
})
</script>

<style scoped>
.sys-section-bg {
  padding: 24px;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.page-title {
  display: flex;
  align-items: center;
  margin-bottom: 16px;
  color: #333;
}

.toolbar {
  display: flex;
  align-items: center;
  margin-bottom: 16px;
}
</style> 